<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="Saturday_to_Monday">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://example.com/2023/06/08/闭包的产生及应用/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="尚硅谷JavaScript高级闭包的P31学习笔记 闭包的理解：12345678function fn1()&amp;#123;         var a&#x3D;2         function fn2()&amp;#123;             console.log(a)         &amp;#125;          return fn2     &amp;#125;     fn1()  断点 var 处断点">
<meta property="og:type" content="article">
<meta property="og:title" content="闭包的产生及应用">
<meta property="og:url" content="http://example.com/2023/06/08/%E9%97%AD%E5%8C%85%E7%9A%84%E4%BA%A7%E7%94%9F%E5%8F%8A%E5%BA%94%E7%94%A8/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="尚硅谷JavaScript高级闭包的P31学习笔记 闭包的理解：12345678function fn1()&amp;#123;         var a&#x3D;2         function fn2()&amp;#123;             console.log(a)         &amp;#125;          return fn2     &amp;#125;     fn1()  断点 var 处断点">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-06-08T12:27:28.148Z">
<meta property="article:modified_time" content="2023-06-03T09:48:11.317Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="JavaScript高级 闭包">
<meta name="twitter:card" content="summary">
    
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b87a931b162a415d9b8127dded86ae2e~tplv-k3u1fbpfcp-watermark.image?" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b87a931b162a415d9b8127dded86ae2e~tplv-k3u1fbpfcp-watermark.image?">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b87a931b162a415d9b8127dded86ae2e~tplv-k3u1fbpfcp-watermark.image?">
    <!--- Page Info-->
    
    <title>
        
            闭包的产生及应用 -
        
        Weekend&#39;s Blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    
<link rel="stylesheet" href="/assets/fonts.css">

    <!--- Font Part-->
    
    
    
    

    <!--- Inject Part-->
    
    <script id="hexo-configurations">
    let Global = window.Global || {};
    Global.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    Global.theme_config = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":true,"lazyload":true,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#A31F34","secondary":null},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":false,"scale":true},"scroll_progress":{"bar":false,"percentage":true},"busuanzi_counter":{"enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"pjax":true,"open_graph":true,"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"static","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Weekend's Blog","subtitle":{"text":["welcome to Weekend's blog ","分享日常生活,记录学习日志"],"hitokoto":{"enable":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":true,"links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.1.5","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Archives":{"path":"/archives","icon":"fa-regular fa-archive"},"Status":{"path":"https://status.evanluo.top/","icon":"fa-regular fa-chart-bar"},"About":{"icon":"fa-regular fa-user","submenus":{"Me":"/about","Github":"https://github.com/EvanNotFound/hexo-theme-redefine","Blog":"https://ohevan.com","Friends":"/friends"}}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"links":null},"article_date_format":"auto","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}}};
    Global.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
    Global.data_config = {"masonry":false};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
        <span class="pjax-progress-icon">
            <i class="fa-solid fa-circle-notch fa-spin"></i>
        </span>
    
</div>


<main class="page-container">

    

    <div class="main-content-container">

        <div class="main-content-header">
            <header class="navbar-container">
    
    <div class="navbar-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                Weekend&#39;s Blog
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/"  >
                                    
                                        
                                            <i class="fa-regular fa-house"></i>
                                        
                                        首页
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/archives"  >
                                    
                                        
                                            <i class="fa-regular fa-archive"></i>
                                        
                                        归档
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    target="_blank" rel="noopener" href="https://status.evanluo.top/"  >
                                    
                                        
                                            <i class="fa-regular fa-chart-bar"></i>
                                        
                                        状态
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="has-dropdown" 
                                    href="#" onClick="return false;">
                                    
                                        
                                            <i class="fa-regular fa-user"></i>
                                        
                                        关于&nbsp;<i class="fa-solid fa-chevron-down"></i>
                                    
                                </a>
                                <!-- Submenu -->
                                
                                    <ul class="sub-menu">
                                    
                                        <li>
                                        <a href="/about">ME
                                        </a>
                                        </li>
                                    
                                        <li>
                                        <a target="_blank" rel="noopener" href="https://github.com/EvanNotFound/hexo-theme-redefine">GITHUB
                                        </a>
                                        </li>
                                    
                                        <li>
                                        <a target="_blank" rel="noopener" href="https://ohevan.com">BLOG
                                        </a>
                                        </li>
                                    
                                        <li>
                                        <a href="/friends">友情链接
                                        </a>
                                        </li>
                                    
                                    </ul>
                                
                            </li>
                    
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile drawer -->
    <div class="navbar-drawer">
        <ul class="drawer-navbar-list">
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/"  >
                             
                                
                                    <i class="fa-regular fa-house"></i>
                                
                                首页
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/archives"  >
                             
                                
                                    <i class="fa-regular fa-archive"></i>
                                
                                归档
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        target="_blank" rel="noopener" href="https://status.evanluo.top/"  >
                             
                                
                                    <i class="fa-regular fa-chart-bar"></i>
                                
                                状态
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="has-dropdown" 
                        href="#" onClick="return false;">
                            
                                
                                    <i class="fa-regular fa-user"></i>
                                
                                关于&nbsp;<i class="fa-solid fa-chevron-down"></i>
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                              
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" href="/about">ME</a>
                            </li>
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" target="_blank" rel="noopener" href="https://github.com/EvanNotFound/hexo-theme-redefine">GITHUB</a>
                            </li>
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" target="_blank" rel="noopener" href="https://ohevan.com">BLOG</a>
                            </li>
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" href="/friends">友情链接</a>
                            </li>
                        
                    
            

        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            
            
                <div class="article-title">
                    <h1 class="article-title-regular">闭包的产生及应用</h1>
                </div>
            
                
            

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/user.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">Saturday_to_Monday</span>
                            
                                <span class="author-label">Lv1</span>
                            
                        </div>
                        <div class="meta-info">
                            <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2023-06-08 20:27:28</span>
        <span class="mobile">2023-06-08 20:27</span>
        <span class="hover-info">创建</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2023-06-03 17:48:11</span>
            <span class="mobile">2023-06-03 17:48</span>
            <span class="hover-info">更新</span>
        </span>
    

    
    
        <span class="article-tags article-meta-item">
            <i class="fa-regular fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/JavaScript%E9%AB%98%E7%BA%A7-%E9%97%AD%E5%8C%85/">JavaScript高级 闭包</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fa-regular fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content markdown-body">
                <p>尚硅谷JavaScript高级闭包的P31学习笔记</p>
<h2 id="闭包的理解："><a href="#闭包的理解：" class="headerlink" title="闭包的理解："></a>闭包的理解：</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">         <span class="keyword">var</span> a=<span class="number">2</span></span><br><span class="line">         <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">             <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">         &#125;</span><br><span class="line">          <span class="keyword">return</span> fn2</span><br><span class="line">     &#125;</span><br><span class="line">     <span class="title function_">fn1</span>()</span><br></pre></td></tr></table></figure></div>

<h3 id="断点"><a href="#断点" class="headerlink" title="断点"></a>断点</h3><ul>
<li>var 处断点<ul>
<li>第一层显示a与fn2</li>
<li>fn2内部会有显示属性closure(闭包)，该属性内部有a值undefined;</li>
</ul>
</li>
<li>fn2函数内部的断点<ul>
<li>直接显示closure 展开是a值</li>
</ul>
</li>
</ul>
<h3 id="版本问题"><a href="#版本问题" class="headerlink" title="版本问题"></a>版本问题</h3><ul>
<li>原本不需要加上return语句，更新版本优化后，面板不会直接显示fn2函数</li>
<li>解决：加上return 手动返回</li>
</ul>
<h3 id="内部函数创建方式不同"><a href="#内部函数创建方式不同" class="headerlink" title="内部函数创建方式不同"></a>内部函数创建方式不同</h3><ul>
<li><p>如上</p>
</li>
<li><p>匿名函数</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> a=<span class="number">2</span></span><br><span class="line">  <span class="keyword">var</span> fm2 =  <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// return fn2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn1</span>()</span><br></pre></td></tr></table></figure></div>
</li>
<li><p>该种方式定义fn2内部存储的是地址值，函数并没有创建</p>
</li>
<li><p>此时fn2显示的是undefined;而不是内部有闭包</p>
</li>
</ul>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><ul>
<li>闭包的指的是内部嵌套了一个函数</li>
<li>闭包内部嵌套的函数内部存储了变量值对象</li>
</ul>
<h2 id="闭包产生条件"><a href="#闭包产生条件" class="headerlink" title="闭包产生条件"></a>闭包产生条件</h2><div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">           <span class="keyword">var</span> a=<span class="number">2</span></span><br><span class="line">           <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">               a++<span class="comment">//引用变量</span></span><br><span class="line">               <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">           &#125;</span><br><span class="line">           <span class="keyword">return</span> fn2</span><br><span class="line">       &#125;</span><br><span class="line">      <span class="keyword">var</span> f=<span class="title function_">fn1</span>()</span><br><span class="line">      <span class="title function_">f</span>()<span class="comment">//3</span></span><br><span class="line">   <span class="title function_">f</span>()<span class="comment">//4</span></span><br></pre></td></tr></table></figure></div>

<h3 id="条件"><a href="#条件" class="headerlink" title="条件"></a>条件</h3><ol>
<li>外层函数嵌套内层函数</li>
<li>内部函数中使用了外层函数的变量</li>
<li>外部函数被调用</li>
</ol>
<h3 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h3><ol>
<li>函数执行完毕自动释放内存<ul>
<li>没有var 的变量值存储时f()输出3，3</li>
</ul>
</li>
<li>闭包的产生次数<ul>
<li>1次（外层函数的调用次数）<ul>
<li>函数的引用与创建的区别</li>
<li>fn1()调用外层的函数代码，赋值给了f;此处闭包产生了一次</li>
<li>f()后面调用的两次，直接调用的内层函数fn2(),因此没有产生闭包</li>
</ul>
</li>
</ul>
</li>
<li>函数变量的提升<ul>
<li>函数的提升，变量的提升在代码的执行之前，称为预解析</li>
<li>因此断点的使用不会影响结果</li>
</ul>
</li>
<li>闭包的特点<ul>
<li>函数的变量一直存储于内存当中，不会立即释放</li>
<li>外部函数fn1之心完毕，销毁函数执行上下，将变量a ，以及fn2这个变量名释放</li>
<li>但由于fn2被rerurn 到f，因此地址值被保存了下来，只要有一个函数名指向该函数fn2，那么他就不会变成垃圾对象被回收</li>
<li>也就是后期f()调用实际上都是直接在全局当中直接在上下文执行的原因</li>
</ul>
</li>
</ol>
<h3 id="疑问"><a href="#疑问" class="headerlink" title="疑问"></a>疑问</h3><ol>
<li><p>直接调用fn1()面板不输出结果</p>
</li>
<li><p>f()为何不是从外层开始调用的函数</p>
<ul>
<li><p>fn1调用后返回值为fn2函数，因此f（）的调用直接从内层函数开始算起；</p>
</li>
<li><p>原理等同于fn1()(),重新调用fn1()会让变量被重新赋值，但是连续调用不会</p>
</li>
</ul>
</li>
</ol>
<h2 id="闭包的作用"><a href="#闭包的作用" class="headerlink" title="闭包的作用"></a>闭包的作用</h2><h3 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h3><ol>
<li>在函数外部操作内部局部变量（按理说函数执行完毕之后释放）</li>
<li>延长闭包的生命周期</li>
</ol>
<h3 id="具体操作"><a href="#具体操作" class="headerlink" title="具体操作"></a>具体操作</h3><div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> a=<span class="number">2</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">        a++</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">fn3</span>(<span class="params"></span>)&#123;</span><br><span class="line">        a--</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> fn3<span class="comment">//闭包可以在外侧调用内层函数的关键1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> f=<span class="title function_">fn1</span>()<span class="comment">//关键2</span></span><br><span class="line"><span class="title function_">f</span>()<span class="comment">//1</span></span><br><span class="line"><span class="title function_">f</span>()<span class="comment">//0</span></span><br></pre></td></tr></table></figure></div>



<h3 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h3><ol>
<li><p>通常函数执行后内部的局部变量还存在吗&#x2F;&#x2F;否</p>
</li>
<li><p>通常函数的外部可以直接访问函数内部的对象吗&#x2F;&#x2F;否</p>
</li>
</ol>
<h2 id="闭包的生命周期"><a href="#闭包的生命周期" class="headerlink" title="闭包的生命周期"></a>闭包的生命周期</h2><h3 id="产生时间"><a href="#产生时间" class="headerlink" title="产生时间"></a>产生时间</h3><ol>
<li>函数的定义执行时，如函数在fn1书写完成，函数预解析，闭包产生</li>
<li>不是调用的时候</li>
</ol>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line">           <span class="comment">// 此时闭包就已经产生了（函数提升，内部函数对象已经创建了）</span></span><br><span class="line">           <span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">           <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">               a++;</span><br><span class="line">               <span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">           &#125;</span><br><span class="line">           <span class="keyword">return</span> fn2;</span><br><span class="line">       &#125;</span><br><span class="line">       </span><br><span class="line">       <span class="keyword">var</span> f = <span class="title function_">fn1</span>();</span><br><span class="line">       <span class="title function_">f</span>();    <span class="comment">//3</span></span><br><span class="line">       <span class="title function_">f</span>();    <span class="comment">//4</span></span><br><span class="line">       f = <span class="literal">null</span>;  <span class="comment">//闭包死亡（包含闭包的函数对象成为垃圾对象）</span></span><br></pre></td></tr></table></figure></div>



<h3 id="结束时间"><a href="#结束时间" class="headerlink" title="结束时间"></a>结束时间</h3><div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">f=<span class="literal">null</span><span class="comment">//函数对象指向的变量名被清空，没用指向的对象，成为垃圾对象被回收；</span></span><br></pre></td></tr></table></figure></div>



<h2 id="闭包的应用"><a href="#闭包的应用" class="headerlink" title="闭包的应用"></a>闭包的应用</h2><h3 id="自定义JS模块"><a href="#自定义JS模块" class="headerlink" title="自定义JS模块"></a>自定义JS模块</h3><ol>
<li><p>js模块的打包（封装有一些特定功能的文件）</p>
</li>
<li><p>向外部暴露一个或者多个函数</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//打包的js文件；</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">myFunction</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> temp=<span class="string">&#x27;临时变量&#x27;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于add的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">remove</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于remove的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 暴露一个：return ad</span></span><br><span class="line">    <span class="comment">// return add</span></span><br><span class="line">    <span class="comment">// 暴露多个:</span></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">add</span>:add,</span><br><span class="line">        <span class="attr">remove</span>:remove</span><br><span class="line">        <span class="comment">//属性名（字符串）：函数名</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>

<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//主文档中引入</span></span><br><span class="line">&lt;script src=<span class="string">&quot;jsDocument.js&quot;</span>&gt;   &lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure></div>
</li>
<li><p>向外传递的两种方法</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//return</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">myFunction</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> temp=<span class="string">&#x27;临时变量&#x27;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于add的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">remove</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于remove的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 暴露一个：return ad</span></span><br><span class="line">    <span class="comment">// return add</span></span><br><span class="line">    <span class="comment">// 暴露多个:</span></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">add</span>:add,</span><br><span class="line">        <span class="attr">remove</span>:remove</span><br><span class="line">        <span class="comment">//属性名（字符串）：函数名</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//window参数的传递1</span></span><br><span class="line">(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> temp=<span class="string">&#x27;临时变量&#x27;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于add的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">remove</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于remove的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="variable language_">window</span>.<span class="property">myMoudule</span>=&#123;</span><br><span class="line">    	<span class="attr">add</span>:add,</span><br><span class="line">    	<span class="attr">remove</span>:remove</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)()</span><br><span class="line"><span class="comment">//window的参数传递2 ==代码压缩的好处</span></span><br><span class="line">(<span class="keyword">function</span>(<span class="params"><span class="variable language_">window</span></span>)&#123;</span><br><span class="line">    <span class="keyword">var</span> temp=<span class="string">&#x27;临时变量&#x27;</span>;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于add的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">remove</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`使用了一个关于remove的方法<span class="subst">$&#123;temp&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="variable language_">window</span>.<span class="property">myMoudule</span>=&#123;</span><br><span class="line">    	<span class="attr">add</span>:add,</span><br><span class="line">    	<span class="attr">remove</span>:remove</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)(<span class="variable language_">window</span>)</span><br></pre></td></tr></table></figure></div>


</li>
<li><p>模块的使用</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"> <span class="comment">//return 方法的调用</span></span><br><span class="line">    <span class="comment">// myFunction()//执行后释放</span></span><br><span class="line">    <span class="comment">//解决办法:单个向外暴露</span></span><br><span class="line">    <span class="keyword">var</span> fn=<span class="title function_">myFunction</span>()</span><br><span class="line">    <span class="comment">// fn()</span></span><br><span class="line">    <span class="comment">//多个中的某一个向外暴露</span></span><br><span class="line">    fn.<span class="title function_">add</span>()</span><br><span class="line">    fn.<span class="title function_">remove</span>()</span><br><span class="line"> <span class="comment">//window属性的调用</span></span><br><span class="line">	    myMoudule.<span class="title function_">add</span>()</span><br><span class="line">   		myMoudule.<span class="title function_">remove</span>()</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h2 id="闭包的缺点及解决"><a href="#闭包的缺点及解决" class="headerlink" title="闭包的缺点及解决"></a>闭包的缺点及解决</h2><h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3><ol>
<li>外部泄露参数</li>
<li>局部变量未能释放，变量占用内存</li>
</ol>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">var</span> arr=<span class="keyword">new</span> <span class="title class_">Array</span>[<span class="number">1000000000</span>]</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line"> 	<span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="property">length</span>)</span><br><span class="line"> &#125;</span><br><span class="line"> 	<span class="keyword">return</span> fn2</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> f=<span class="title function_">fn1</span>()</span><br><span class="line"><span class="title function_">f</span>()</span><br><span class="line">f=<span class="literal">null</span></span><br><span class="line"><span class="comment">//创建的数组占用内存，函数执行完毕也不会自动释放，需要手动请理</span></span><br></pre></td></tr></table></figure></div>



<h3 id="解决"><a href="#解决" class="headerlink" title="解决"></a>解决</h3><ol>
<li>少用</li>
<li>f&#x3D;null</li>
</ol>
<h3 id="内存溢出与内存泄露"><a href="#内存溢出与内存泄露" class="headerlink" title="内存溢出与内存泄露"></a>内存溢出与内存泄露</h3><ol>
<li><p>内存溢出</p>
<ul>
<li><p>程序运行出现错误</p>
<blockquote>
<p>生成多个变量名，需要分配内存空间</p>
</blockquote>
</li>
<li><p>当前程序运行所需要的内存空间，大于剩余内存</p>
<blockquote>
</blockquote>
</li>
</ul>
</li>
<li><p>内存泄露</p>
<ul>
<li><p>占用内存并未得到及时释放</p>
</li>
<li><p>内存累积导致溢出</p>
</li>
<li><p>例子</p>
<blockquote>
<p>意外全局变量</p>
<p>未清理计时器或回调函数</p>
<p>闭包</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="comment">//此处的a为全局变量，即使在函数内部</span></span><br><span class="line">    a = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">10000</span>);</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(a);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>();</span><br><span class="line"><span class="comment">//清理计时器或者回调函数</span></span><br><span class="line"><span class="keyword">var</span> start = <span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;,<span class="number">2000</span>);</span><br><span class="line"><span class="built_in">clearInterval</span>(start);</span><br><span class="line"><span class="comment">// 闭包</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">4</span>;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(++a);</span><br><span class="line">&#125;</span><br><span class="line">    <span class="keyword">return</span> fn2;</span><br><span class="line">&#125;</span><br><span class="line">    <span class="keyword">var</span> f = <span class="title function_">fn1</span>();</span><br><span class="line"><span class="title function_">f</span>();</span><br><span class="line">f = <span class="literal">null</span>; </span><br></pre></td></tr></table></figure></div></li>
</ul>
</li>
</ol>
<h2 id="闭包的面试题"><a href="#闭包的面试题" class="headerlink" title="闭包的面试题"></a>闭包的面试题</h2>
            </div>

            
                <div class="post-copyright-info">
                    <div class="article-copyright-info-container">
    <ul>
        <li><strong>标题:</strong> 闭包的产生及应用</li>
        <li><strong>作者:</strong> Saturday_to_Monday</li>
        <li><strong>创建于:</strong> 2023-06-08 20:27:28</li>
        
            <li>
                <strong>更新于:</strong> 2023-06-03 17:48:11
            </li>
        
        <li>
            <strong>链接:</strong> to-saturday.top/2023/06/08/闭包的产生及应用/
        </li>
        <li>
            <strong>版权声明:</strong> 本文章采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0</a> 进行许可。
        </li>
    </ul>
</div>

                </div>
            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/JavaScript%E9%AB%98%E7%BA%A7-%E9%97%AD%E5%8C%85/">#JavaScript高级 闭包</a>&nbsp;
                        </li>
                    
                </ul>
            

            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                            rel="prev"
                            href="/2023/06/08/%E5%9F%BA%E4%BA%8EGitee%E4%B8%8Ehexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/"
                            >
                                <span class="left arrow-icon flex-center">
                                    <i class="fa-solid fa-chevron-left"></i>
                                </span>
                                <span class="title flex-center">
                                    <span class="post-nav-title-item">基于Gitee/Github与hexo搭建博客</span>
                                    <span class="post-nav-item">上一篇</span>
                                </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                            rel="next"
                            href="/2023/06/08/laraval-%E5%A4%A7%E7%BA%B2/"
                            >
                                <span class="title flex-center">
                                    <span class="post-nav-title-item">laravel大纲</span>
                                    <span class="post-nav-item">下一篇</span>
                                </span>
                                <span class="right arrow-icon flex-center">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </span>
                            </a>
                        </div>
                    
                </div>
            


            
                <div class="comment-container">
                    <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fa-solid fa-comments"></i>&nbsp;评论
    </div>
    

        
            
 
    <div id="waline"></div>
    <script type="module"  data-pjax>
        import { init } from 'https://evan.beee.top/js/waline.mjs';

        function loadWaline() {
            init({
                el: '#waline',
                serverURL: 'https://example.example.com',
                lang: 'zh-CN',
                dark: 'body[class~="dark-mode"]',
                requiredMeta: ['nick','mail'], // cannot customize by theme config, change it yourself
            });
        }

        if ('true') {
            const loadWalineTimeout = setTimeout(() => {
                loadWaline();
                clearTimeout(loadWalineTimeout);
            }, 1000);
        } else {
            window.addEventListener('DOMContentLoaded', loadWaline);
        }
        
    </script>



        
    
</div>

                </div>
            
        </div>

        
            <div class="toc-content-container">
                <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">此页目录</div>
        <div class="page-title">闭包的产生及应用</div>
        <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9A"><span class="nav-text">闭包的理解：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%AD%E7%82%B9"><span class="nav-text">断点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%89%88%E6%9C%AC%E9%97%AE%E9%A2%98"><span class="nav-text">版本问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E9%83%A8%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F%E4%B8%8D%E5%90%8C"><span class="nav-text">内部函数创建方式不同</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-text">总结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E4%BA%A7%E7%94%9F%E6%9D%A1%E4%BB%B6"><span class="nav-text">闭包产生条件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9D%A1%E4%BB%B6"><span class="nav-text">条件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="nav-text">知识点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%96%91%E9%97%AE"><span class="nav-text">疑问</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="nav-text">闭包的作用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%9C%E7%94%A8"><span class="nav-text">作用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B7%E4%BD%93%E6%93%8D%E4%BD%9C"><span class="nav-text">具体操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98"><span class="nav-text">问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="nav-text">闭包的生命周期</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%A7%E7%94%9F%E6%97%B6%E9%97%B4"><span class="nav-text">产生时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%93%E6%9D%9F%E6%97%B6%E9%97%B4"><span class="nav-text">结束时间</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E5%BA%94%E7%94%A8"><span class="nav-text">闭包的应用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89JS%E6%A8%A1%E5%9D%97"><span class="nav-text">自定义JS模块</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E7%BC%BA%E7%82%B9%E5%8F%8A%E8%A7%A3%E5%86%B3"><span class="nav-text">闭包的缺点及解决</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BC%BA%E7%82%B9"><span class="nav-text">缺点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3"><span class="nav-text">解决</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E5%AD%98%E6%BA%A2%E5%87%BA%E4%B8%8E%E5%86%85%E5%AD%98%E6%B3%84%E9%9C%B2"><span class="nav-text">内存溢出与内存泄露</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%97%AD%E5%8C%85%E7%9A%84%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="nav-text">闭包的面试题</span></a></li></ol>

    </div>
</div>
            </div>
        
    </div>
</div>


                

            </div>
            
            

        </div>

        <div class="main-content-footer">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info">
            &copy;
            
              <span>2022</span>
              -
            
            2023&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">Saturday_to_Monday</a>
        </div>
        
            <script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    <span id="busuanzi_container_site_uv" class="busuanzi_container_site_uv">
                        访问人数&nbsp;<span id="busuanzi_value_site_uv" class="busuanzi_value_site_uv"></span>
                    </span>
                
                
                    <span id="busuanzi_container_site_pv" class="busuanzi_container_site_pv">
                        总访问量&nbsp;<span id="busuanzi_value_site_pv" class="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="theme-info info-item">
            <span class="powered-by-container">由 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" href="https://hexo.io">Hexo</a> 驱动</span>
                <br>
            <span class="theme-version-container">主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.1.5</a>
        </div>
        
        
        
            <div id="start_div" style="display:none">
                2022/8/17 11:45:14
            </div>
            <div>
                博客已运行 <span class="odometer" id="runtime_days" ></span> 天 <span class="odometer" id="runtime_hours"></span> 小时 <span class="odometer" id="runtime_minutes"></span> 分钟 <span class="odometer" id="runtime_seconds"></span> 秒
            </div>
        
        
        
            <script async data-pjax>
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-expand-width flex-center">
            <i class="fa-regular fa-expand"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    


</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/layouts/navbarShrink.js"></script>

<script src="/js/tools/scrollTopBottom.js"></script>

<script src="/js/tools/lightDarkSwitch.js"></script>





    
<script src="/js/tools/codeBlock.js"></script>




    
<script src="/js/layouts/lazyload.js"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/libs/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js"></script>







<div class="post-scripts pjax">
    
        
<script src="/js/tools/tocToggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/layouts/toc.js"></script>

<script src="/js/plugins/tabs.js"></script>

    
</div>


    
<script src="/js/libs/pjax.min.js"></script>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.pjax = new Pjax({
            selectors: [
                'head title',
                '.page-container',
                '.pjax',
            ],
            history: true,
            debug: false,
            cacheBust: false,
            timeout: 0,
            analytics: false,
            currentUrlFullReload: false,
            scrollRestoration: false,
            // scrollTo: true,
        });

        document.addEventListener('pjax:send', () => {
            Global.utils.pjaxProgressBarStart();
        });

        document.addEventListener('pjax:complete', () => {
            Global.utils.pjaxProgressBarEnd();
            window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
            Global.refresh();
        });
    });
</script>




</body>
</html>
